Computed Properties এর Syntax এবং ব্যবহার

Computed Properties হল Ember.js এর একটি গুরুত্বপূর্ণ বৈশিষ্ট্য যা ডেটা ম্যানিপুলেশনে সাহায্য করে। এটি একটি getter ফাংশন হিসেবে কাজ করে, যা dependency পরিবর্তন হলে অটোমেটিক্যালি আপডেট হয়। Ember.js-এর computed properties ব্যবহারকারীদের জন্য ডেটা ভ্যালু পরিচালনা এবং প্রসেস করার একটি অত্যন্ত কার্যকরী উপায় প্রদান করে, যেখানে আপনি সহজে ডেটার উপর নির্ভরশীল পদ্ধতি ও হিসাব তৈরি করতে পারেন।

Computed Properties এর মূল উদ্দেশ্য

• ডেটা পরিবর্তনের উপর ভিত্তি করে নতুন মান তৈরি করা।
• একাধিক properties এর উপর নির্ভরশীলভাবে নতুন ডেটা হিসাব করা।
• জটিল লজিক অ্যাক্সেস করা, যা ডেটার পরিবর্তন অনুসরণ করে।

Ember.js-এ Computed Properties এর Syntax

Ember.js-এ computed properties সাধারণত @computed ডেকোরেটর ব্যবহার করে সংজ্ঞায়িত করা হয় (Ember Octane সংস্করণ থেকে), তবে পুরানো সংস্করণে এটি Ember.computed দ্বারা পরিচালিত হতো।

১. Ember Octane (এমবার 3.x+) এ Computed Properties:

Ember Octane সংস্করণে @computed ডেকোরেটর ব্যবহার করা হয়।

// app/components/rectangle.js
import Component from '@glimmer/component';
import { computed } from '@ember/object';

export default class RectangleComponent extends Component {
  width = 10;
  height = 5;

  // Computed property
  @computed('width', 'height')
  get area() {
    return this.width * this.height;
  }
}

এখানে:

• @computed('width', 'height'): এটি একটি computed property যা width এবং height এর মান পরিবর্তন হলে area-র মান আপডেট হবে।
• area: একটি গেটার মেথড যা width এবং height এর মান নিয়ে area হিসাব করে।

২. পুরানো Ember সংস্করণে Computed Properties:

Ember.js-এ পূর্বের সংস্করণে Ember.computed ফাংশন ব্যবহার করে computed properties তৈরি করা হয়।

// app/components/rectangle.js
import Component from '@ember/component';
import { computed } from '@ember/object';

export default Component.extend({
  width: 10,
  height: 5,

  // Computed property
  area: computed('width', 'height', function() {
    return this.width * this.height;
  })
});

এখানে:

• computed('width', 'height', function() { ... }): এটি computed property তৈরি করে যা width এবং height এর মানের ওপর নির্ভর করে area রিটার্ন করবে।

Computed Properties এর ব্যবহার

১. Simple Computed Property:

একটি সাধারণ গাণিতিক হিসাব বা ডেটা ম্যানিপুলেশন করতে computed properties ব্যবহার করা হয়।

// app/components/rectangle.js
import Component from '@glimmer/component';
import { computed } from '@ember/object';

export default class RectangleComponent extends Component {
  width = 10;
  height = 5;

  @computed('width', 'height')
  get area() {
    return this.width * this.height;
  }
}

এখানে area প্রপার্টি width এবং height প্রপার্টির উপর নির্ভর করে।

২. Chained Computed Properties:

একটি computed property অন্য একটি computed property-এর উপর নির্ভর করতে পারে।

// app/components/rectangle.js
import Component from '@glimmer/component';
import { computed } from '@ember/object';

export default class RectangleComponent extends Component {
  width = 10;
  height = 5;

  @computed('width', 'height')
  get area() {
    return this.width * this.height;
  }

  @computed('area')
  get perimeter() {
    return 2 * (this.width + this.height);
  }
}

এখানে, perimeter একটি computed property যা area এর উপর নির্ভর করে, এবং area এর মান পরিবর্তিত হলে perimeter আপডেট হবে।

৩. Computed Property with Setter:

Ember.js-এ computed properties একটি setter ফাংশনও ধারণ করতে পারে, যা ডেটা পরিবর্তন করার জন্য ব্যবহৃত হয়।

// app/components/rectangle.js
import Component from '@glimmer/component';
import { computed } from '@ember/object';

export default class RectangleComponent extends Component {
  width = 10;
  height = 5;

  @computed('width', 'height')
  get area() {
    return this.width * this.height;
  }

  @area.set
  setArea(newArea) {
    this.width = Math.sqrt(newArea);
    this.height = Math.sqrt(newArea);
  }
}

এখানে, setArea একটি setter মেথড যা area এর মান পরিবর্তন করলে width এবং height কে নতুন মান অনুযায়ী আপডেট করবে।

৪. Using @tracked and @computed Together:

Ember Octane-এ @tracked ব্যবহার করে কোনো প্রপার্টি ট্র্যাক করা যায়, এবং সেই প্রপার্টি পরবর্তীতে @computed দ্বারা প্রক্রিয়া করা যেতে পারে।

import Component from '@glimmer/component';
import { tracked } from '@glimmer/tracking';
import { computed } from '@ember/object';

export default class RectangleComponent extends Component {
  @tracked width = 10;
  @tracked height = 5;

  @computed('width', 'height')
  get area() {
    return this.width * this.height;
  }
}

এখানে, @tracked এর মাধ্যমে width এবং height প্রপার্টিগুলো ট্র্যাক করা হচ্ছে এবং তাদের মান পরিবর্তন হলে area স্বয়ংক্রিয়ভাবে আপডেট হবে।

Computed Properties এর সুবিধা

1. Automatic Updates: যখন নির্দিষ্ট ডেটার উপর নির্ভরশীল মান পরিবর্তিত হয়, তখন computed properties সেই পরিবর্তনের প্রতি প্রতিক্রিয়া জানায় এবং স্বয়ংক্রিয়ভাবে আপডেট হয়।
2. Data Encapsulation: ডেটার মধ্যে লজিক বা গাণিতিক হিসাব করে computed properties ব্যবহার করলে, অ্যাপ্লিকেশন লজিক পরিষ্কার এবং পাঠযোগ্য হয়।
3. Performance Optimization: Ember.js কেবলমাত্র তখনই computed property রেন্ডার করে যখন তার নির্ভরশীল ডেটা পরিবর্তিত হয়, ফলে এটি কর্মক্ষমতা উন্নত করতে সাহায্য করে।

Ember.js-এ Computed Properties ব্যবহার করে আপনি ডেটার উপর নির্ভরশীলভাবে নতুন মান তৈরি করতে পারেন। এটি ডেটা ম্যানিপুলেশনকে সহজ এবং কার্যকর করে তোলে, কারণ এটি স্বয়ংক্রিয়ভাবে আপডেট হয় এবং ডেটার পরিবর্তনকে অনুসরণ করে। Ember Octane সংস্করণে @computed ডেকোরেটর ব্যবহার করে computed properties তৈরি করা সহজ হয়েছে, যা অ্যাপ্লিকেশনের স্টেট এবং লজিককে আরও পরিষ্কার এবং উপকারী করে তোলে।